<!-- 月票凭证 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      @handleChange="handleSearchChange"
      :isNeedTree="true"
      :isCheckbox="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>

    <div class="common-table-tree-wrapper">
      <!-- <table-tree :isNeedTree="isNeedTree" :paramName="paramName" @toggleTreeBox="toggleTreeBox" @setSelectedNode="setSelectedNode" @searchFn="getList">
      </table-tree>-->
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MONTH:TICKET:CERTIFI:EXPORT')"
              @click.prevent="exportCertifi()"
            >导出</a>
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('MONTH:TICKET:CERTIFI:DELAY')"
              @click.prevent="delayCertifi('certifi_delay_modal')"
            >延长到期时间</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column
                  v-if="item.checked"
                  :key="index"
                  :label="item.text"
                  :min-width="item.minWidth"
                  :width="item.width"
                  :prop="item.prop"
                  :sortable="item.sortable"
                ></el-table-column>
              </template>
            </el-table-column>

            <el-table-column
              v-else
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index+1 }}</span>
                <span
                  v-else-if="'submitTime' == props.prop"
                >{{ scope.row.submitTime |mileSecondToDate }}</span>
                <span
                  v-else-if="'expriedTime' == props.prop"
                >{{ scope.row.expriedTime |mileSecondToDate }}</span>
                <span
                  v-else-if="'checkTime' == props.prop"
                >{{ scope.row.checkTime |mileSecondToDate }}</span>
                <span v-else-if="'certifiUrl' == props.prop && scope.row.certifiUrl">
                  <a
                    class="imgLink"
                    @click="showBigImgModal('bigPicModal', scope.row['certifiUrl'])"
                  >
                    <!-- <img class="" style="width: 60px;height:30px;" alt="暂无" :src="scope.row.inCertifiSampleUrl" /> -->
                    点击查看
                  </a>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column
              :fixed="props.fixed"
              :label="props.label"
              width="110"
              class="operateCell"
            >
              <template slot-scope="scope">
                <el-button
                  size="small"
                  type="primary"
                  icon="icon-audit"
                  class="ake-icon-font"
                  title="审核"
                  v-if="isPermmited('MONTH:TICKET:CERTIFI:CHECK')"
                  :disabled="scope.row.status!=0"
                  @click="checkCertifi('certifi_check_modal',scope.row)"
                  plain
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <!---->
        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>

    <!--选择停车场树-->
    <basic-modal ref="selectParkModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">选择停车场</h3>
      <div class="modal-body" slot="modal-body">
        <div class="common-tree modal-tree-box">
          <ul id="ParkTree" name="ParkTree" class="ztree"></ul>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="selectParkSure()"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('selectParkModal',2)">取消</button>
      </div>
    </basic-modal>

    <!-- 凭证审核modal -->
    <basic-modal
      ref="certifi_check_modal"
      width="640"
      customeClass="certifi_check_modal"
      static="true"
    >
      <h3 slot="title">审核</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="certifi_check_modal_form"
          :model="certifiModel"
          :rules="certifiRules"
          label-position="left"
          label-width="160px"
        >
          <el-form-item label="手机号" prop="telephone">
            <el-input
              placeholder="手机号"
              v-model="certifiModel.telephone"
              class="first-item"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="适用月票">{{certifiModel.ticketName}}</el-form-item>
          <el-form-item label="备注1" prop="remark1">
            <el-input placeholder="请输入备注" v-model="certifiModel.remark1" class="first-item"></el-input>
          </el-form-item>
          <el-form-item label="备注2" prop="remark2">
            <el-input placeholder="请输入备注" v-model="certifiModel.remark2" class="first-item"></el-input>
          </el-form-item>
          <el-form-item label="备注3" prop="remark3">
            <el-input placeholder="请输入备注" v-model="certifiModel.remark3" class="first-item"></el-input>
          </el-form-item>
          <el-form-item label="到期时间" prop="expriedTime">
            <el-date-picker
              v-model="certifiModel.expriedTime"
              type="date"
              align="right"
              placeholder="请选择到期时间"
              :editable="false"
              :clearable="false"
              :picker-options="expriedTimePickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="certifiUrl" label="对内凭证样例">
            <a class="imgLink" @click="showBigImgModal('bigPicModal', certifiModel.certifiUrl)">
              <img
                v-if="certifiModel.certifiUrl"
                :src="certifiModel.certifiUrl"
                class="certifiUrl-pic"
                alt="暂无"
              />
            </a>
          </el-form-item>
          <el-form-item label="审核结果" prop="status">
            <template>
              <el-radio class="radio" v-model="certifiModel.status" label="1">通过</el-radio>
              <el-radio class="radio" v-model="certifiModel.status" label="2">不通过</el-radio>
            </template>
          </el-form-item>
          <el-form-item label="原因" prop="reason" v-if="certifiModel.status==2">
            <el-input
              type="textarea"
              :rows="10"
              placeholder="请输入原因"
              v-model="certifiModel.reason"
              class="first-item"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submitForm('certifi_check_modal_form','certifi_check_modal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('certifi_check_modal')">取消</button>
      </div>
    </basic-modal>

    <!-- 延长到期modal -->
    <basic-modal
      ref="certifi_delay_modal"
      width="640"
      customeClass="certifi_delay_modal"
      static="true"
    >
      <h3 slot="title">延长到期时间</h3>
      <div class="modal-body" slot="modal-body">
        <el-form
          ref="certifi_delay_modal_form"
          :model="delayModel"
          :rules="delayRules"
          label-position="left"
          label-width="160px"
        >
          <el-form-item label="延长月数" prop="months">
            <el-input v-model="delayModel.months" class="first-item"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click.stop="submitDelayForm('certifi_delay_modal_form','certifi_delay_modal')"
        >确认</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('certifi_delay_modal')">取消</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
//import '../../assets/js/libs/moment.min.js'
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import certifi from "./js/certifi.js";

export default {
  name: "monthTicketCertifi",
  mixins: [common, stardardList, invokeModal, certifi, images],
  components: {
    BigPicModal
  },
  data() {
    var today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];
    return {
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: true,
          type: "text",
          name: "query_telephone",
          propName: "query_telephone",
          text: "手机号",
          value: ""
        },
        {
          index: 1,
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: true,
          type: "datePicker",
          name: "submitTimeFromTo",
          propName: "submitTimeFrom,submitTimeTo",
          text: "提交日期",
          value: today,
          style: { width: "360px" }
        },
        {
          index: 2,
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: true,
          type: "datePicker",
          name: "expriedTimeFromTo",
          propName: "expriedTimeFrom,expriedTimeTo",
          text: "到期日期",
          style: { width: "360px" }
        },
        {
          index: 3,
          isShow: false,
          type: "select",
          name: "query_status",
          text: "状态",
          value: "0",
          options: [
            { name: "--全部--", value: "" },
            { name: "未审核", value: "0" },
            { name: "审核通过", value: "1" },
            { name: "审核不通过", value: "2" },
            { name: "审核过期", value: "3" }
          ]
        },
        // {
        //     index: 4, isShow: false, type: 'select', name: 'query_type', text: '凭证类型', value: '', options: [
        //         { name: '--全部--', value: '' },
        //         { name: '对内凭证', value: '0' },
        //         { name: '对外凭证', value: '1' }
        //     ]
        // },
        {
          index: 5,
          format: "yyyy-MM-dd HH:mm:ss",
          isShow: true,
          type: "datePicker",
          name: "checkTimeFromTo",
          propName: "checkTimeFrom,checkTimeTo",
          text: "审核日期",
          style: { width: "360px" }
        },
        {
          index: 6,
          isShow: true,
          type: "text",
          name: "query_checkBy",
          propName: "query_checkBy",
          text: "审核人",
          value: ""
        },
        {
          index: 7,
          isShow: true,
          type: "text",
          name: "query_remark1",
          propName: "query_remark1",
          text: "备注1",
          value: ""
        },
        {
          index: 8,
          isShow: true,
          type: "text",
          name: "query_remark2",
          propName: "query_remark2",
          text: "备注2",
          value: ""
        },
        {
          index: 9,
          isShow: true,
          type: "text",
          name: "query_remark3",
          propName: "query_remark3",
          text: "备注3",
          value: ""
        }
        // {
        // index: 10,
        // isShow: false,
        // initShow: sessionStorage.getItem("isShowOperator") == "false" ? false : true,
        // type: "text",
        // name: "query_operatorName",
        // text: "运营商名称",
        // value: ""
        // }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 68 },
        {
          index: 0,
          isShow: false,
          prop: "telephone",
          text: "手机号",
          minWidth: 55
        },
        {
          index: 1,
          isShow: false,
          prop: "certifiUrl",
          text: "提交资料",
          minWidth: 50
        },
        {
          index: 2,
          isShow: false,
          prop: "submitTime",
          text: "提交日期",
          minWidth: 80
        },
        {
          index: 3,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          minWidth: 60
        },
        {
          index: 4,
          isShow: false,
          prop: "statusStr",
          text: "审核状态",
          minWidth: 50
        },
        {
          index: 5,
          isShow: false,
          prop: "expriedTime",
          text: "到期日期",
          minWidth: 80
        },
        { index: 6, isShow: false, prop: "certifiName", text: "凭证名称" },
        {
          index: 7,
          isShow: false,
          prop: "reason",
          text: "不通过原因",
          minWidth: 70,
          initHidden: true
        },
        // { index: 8, isShow: false, prop: 'typeStr', text: '凭证类型', minWidth: 50, initHidden: true },
        {
          index: 9,
          isShow: false,
          prop: "checkTime",
          text: "审核日期",
          minWidth: 80,
          initHidden: true
        },
        {
          index: 10,
          isShow: false,
          prop: "checkBy",
          text: "审核人",
          initHidden: true
        },
        {
          index: 11,
          isShow: false,
          prop: "remark1",
          text: "备注1",
          initHidden: true
        },
        {
          index: 12,
          isShow: false,
          prop: "remark2",
          text: "备注2",
          initHidden: true
        },
        {
          index: 13,
          isShow: false,
          prop: "remark3",
          text: "备注3",
          initHidden: true
        }
      ],
      tbodysInfo: [],
      expriedTimePickerOptions: {
        disabledDate(time) {
          return time.getTime() <= Date.now();
        }
      }
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
.certifi_check_modal {
  .modal-body {
    min-height: 400px;
  }
  .first-item {
    width: 320px;
  }
  .certifiUrl-pic {
    width: 320px;
  }
}

.certifi_delay_modal {
  .modal-body {
    min-height: 100px;
  }
  .first-item {
    width: 320px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}
</style>
